﻿﻿<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<%
	String path = request.getContextPath();
%>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta content="" name="description" />
	<meta content="webthemez" name="author" />
	<script src="<%=path%>/assets/js/jquery-1.10.2.min.js"></script>
	<script type="text/javascript" src="<%=path %>/mapfiles/mapapi.js"></script>
	<script>
	var map;
	function LocalMapType() {
	}
	LocalMapType.prototype.tileSize = new google.maps.Size(256, 256);
	LocalMapType.prototype.maxZoom = 12; //地图显示最大级别
	LocalMapType.prototype.minZoom = 8; //地图显示最小级别
	LocalMapType.prototype.name = "本地地图";
	LocalMapType.prototype.alt = "显示本地地图数据";
	LocalMapType.prototype.getTile = function(coord, zoom, ownerDocument) {
		var img = ownerDocument.createElement("img");
		img.style.width = this.tileSize.width + "px";
		img.style.height = this.tileSize.height + "px";
		//地图存放路径
		var curSize = Math.pow(2,zoom);
		strURL = "http://localhost:8081/googlemaps/" + zoom + "/" + (coord.x % curSize )+ "/" + (coord.y % curSize)+ ".png";
		img.src = strURL;
		return img;
	};
	var localMapType = new LocalMapType();
	function initialize() {
		var myLatlng = new google.maps.LatLng(39.9, 116.4);
		var mapOptions = {
			zoom : 9,
			center : myLatlng,
			panControl : false,
			zoomControl : false,
			mapTypeControl : false,
			scaleControl : false,
			streetViewControl : false,
			overviewMapControl : false
		}

		map = new google.maps.Map(document.getElementById('map_canvas'),
				mapOptions);
		map.mapTypes.set('localMap', localMapType); //绑定本地地图类型
		map.setMapTypeId('localMap'); //指定显示本地地图
		map.setOptions({
			draggable : true
		});
		$.ajax({
			 type:"POST",
	         url: "<%=path %>/getOrganizationList",
	         success: function(data,status,xhr){
	        	 for(var i=0;i<data.dataList.length;i++){
	        		 var lng=data.dataList[i].longitude;
	        		 var lat=data.dataList[i].latitude;
	        		 if(lng!=null&&lng!=''&&lat!=null&&lat!=''){
	        			var html='<center style="width:120px;overflow: hidden;">检查站名称:</br>'+data.dataList[i].organizationName+'<br /></center>';
		        		var image = '<%=path%>/mapfiles/images/kc.png';
	        			var organizationLatlng = new google.maps.LatLng(lat,lng);
		        		//defined icons
		        		var image = '<%=path%>/mapfiles/images/jcz.png';
		        		
		        		createMarker(organizationLatlng,html,image)
       		 		}
	        	 }
	         }
		})
		setInterval('refreshRunVehicle()',1000*30); 
		refreshRunVehicle();
		}
		var vehicleMarkers=[];
		function createMarker(latLng,html,image){
			var infowindow = new google.maps.InfoWindow({
	            content:html
	        });
			var marker = new google.maps.Marker({
    	        position: latLng,
    	        map: map,
    	        title: '',
    			icon: image
    	    });
			google.maps.event.addListener(marker, 'click', function() {
				infowindow.open(map,marker);
    	    });
			return marker;
		}
		function refreshRunVehicle(){
			for (var i=0;i<vehicleMarkers.length;i++){
	        	   var marker=vehicleMarkers[i].marker;
	        	   marker.setMap(null);
		 	}
			$.ajax({
				 type:"POST",
		         url: "<%=path %>/getRunVehicleList",
		         success: function(data,status,xhr){
		        	 for(var i=0;i<data.dataList.length;i++){
		        		 var vehicleLicense=data.dataList[i].vehicleLicense;
		        		 var personCount=0;
		        		 if(data.dataList[i].personCount>0){
		        			 personCount=data.dataList[i].personCount;
		        		 }else{
		        			 personCount=0;
		        		 }
		        		 var personIn=data.dataList[i].personIn;
		        		 var personOut=data.dataList[i].personOut;
		        		 var lng=data.dataList[i].logitude;
		        		 var lat=data.dataList[i].latitude;
		        		 var deviceCheckPersonCount=data.dataList[i].deviceCheckPersonCount;
		        		 if(lng!=null&&lng!=''&&lat!=null&&lat!=''){
		        			 var html='<div style="width:140px;overflow: hidden;">车牌号:'+vehicleLicense+'<br />在车人数：'+personCount+'</br>'+
		        			 '上车数：'+personIn+'</br>下车数：'+personOut+'</br>车载设备检查数：'+deviceCheckPersonCount+'</div>';
			        		 var image = '<%=path%>/mapfiles/images/kc.png';
			        		 var carLatLng = new google.maps.LatLng(lat, lng);
			        		 var marker=createMarker(carLatLng, html, image)
			        	     vehicleMarkers.push({"vehicleLicense":vehicleLicense,"marker":marker});
		       		 	 }
		        	}
		         }
			})
		}
		google.maps.event.addDomListener(window, 'load', initialize);
	</script>
</head>

<body>
		<div id="page-wrapper">
			<div class="">
				<h1 class="page-header">
				</h1>
			</div>
			<div id="" style="width:100%;height:100%;">
				<div id="map_canvas" style="left:0;top:0;width:100%;height:100%;position:absolute;">
					
				</div>
			</div>
		</div>
</body>
</html>		
		